<template>
    <div id="div">
		<div id="div1">
			<span style="width: 10px; height: 10px; background-color: red; position: absolute; top: 200px; left: 40px;">1</span>
			<span style="width: 10px; height: 10px; background-color: red; position: absolute; top: 350px; left: 190px;">1</span>
			<span style="width: 10px; height: 10px; background-color: red; position: absolute; top: 250px; left: 240px;">1</span>
			<span style="width: 10px; height: 10px; background-color: red; position: absolute; top: 341px; left: 210px;">1</span>
		</div>
		<div id="div2">
			<div style="width: 40px; height: 40px; background-color: #67C23A; position: absolute; left: 0px; top: 0px;transform: rotate(0deg); ">
				<span>11111111111</span>
				
				<div id="div3" ></div>
			</div>
			
		</div>
        
    </div>
</template>

<script>
export default {
    data () {
        return {
             input: '',
            socket:""
        }
    },
    mounted () {
		this.Getwidth()
        // 初始化
        
    },
    methods: {
		Getwidth(){
			let aaa=document.getElementById('div3').scrollHeight
			console.log(aaa)
		}
		
     
    },
    destroyed () {
        
		
    }
}
</script>

<style scoped>
	#div{
		position: relative;
	}
#div1{
	position: absolute;
	background-color: #0000FF;
	width: 100px;
	height: 520px;
	/* left: 100px;
	height: 100px; */
	transform: rotate(0deg); 
}
#div2{
	position: absolute;
	width: 200px;
	height: 200px;
	background-color: yellowgreen;	
	opacity: 0.5;
	transform: rotate(0deg); 
	left: 200px;
	top: 200px;
}

#div3{
	position: absolute;
	width: 30px;
	height: 30px;
	background-color: #00FFFF;
	left: 100px;
	top: 100px;
	transform: rotate(0deg) 
}
	
	
	
	

</style>